<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SpringBoot集成kkFileView+MinIO文件上传预览系统</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/daisyui/4.12.10/full.min.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
</head>
<body class="bg-gray-50">
<div class="container mx-auto px-4 py-8">
    <div class="text-center mb-8">
        <h1 class="text-4xl font-bold text-gray-800 mb-4">
            <i class="fas fa-cloud-upload-alt text-blue-600"></i>
            文件上传预览系统
        </h1>
        <p class="text-gray-600">SpringBoot + kkFileView + MinIO 集成演示</p>
    </div>

    <div class="grid md:grid-cols-2 gap-8">
        <!-- 原生MinioClient上传 -->
        <div class="card bg-base-100 shadow-xl">
            <div class="card-body">
                <h2 class="card-title">
                    <i class="fas fa-upload text-blue-500"></i>
                    原生MinioClient上传
                </h2>
                <p class="text-gray-600 mb-4">使用原生MinioClient上传文件到MinIO</p>

                <form id="minioForm" class="space-y-4">
                    <div class="form-control">
                        <label class="label">
                            <span class="label-text">选择文件</span>
                        </label>
                        <input type="file" name="file" class="file-input file-input-bordered w-full" required>
                    </div>

                    <button type="submit" class="btn btn-primary w-full">
                        <i class="fas fa-cloud-upload-alt mr-2"></i>
                        上传文件
                    </button>
                </form>

                <div id="minioResult" class="hidden mt-4">
                    <div class="alert alert-success">
                        <i class="fas fa-check-circle"></i>
                        <span>上传成功！</span>
                    </div>
                    <div class="mt-2 space-y-2">
                        <p><strong>文件名：</strong><span id="minioFilename"></span></p>
                        <p><strong>文件URL：</strong><a id="minioFileUrl" href="#" target="_blank"
                                                       class="link link-primary">点击查看</a></p>
                        <button id="minioPreviewBtn" class="btn btn-secondary btn-sm">
                            <i class="fas fa-eye mr-2"></i>
                            预览文件
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- AmazonS3 SDK上传 -->
        <div class="card bg-base-100 shadow-xl">
            <div class="card-body">
                <h2 class="card-title">
                    <i class="fas fa-upload text-green-500"></i>
                    AmazonS3 SDK上传
                </h2>
                <p class="text-gray-600 mb-4">使用AmazonS3 SDK上传文件到MinIO</p>

                <form id="s3Form" class="space-y-4">
                    <div class="form-control">
                        <label class="label">
                            <span class="label-text">选择文件</span>
                        </label>
                        <input type="file" name="file" class="file-input file-input-bordered w-full" required>
                    </div>

                    <button type="submit" class="btn btn-success w-full">
                        <i class="fas fa-cloud-upload-alt mr-2"></i>
                        上传文件
                    </button>
                </form>

                <div id="s3Result" class="hidden mt-4">
                    <div class="alert alert-success">
                        <i class="fas fa-check-circle"></i>
                        <span>上传成功！</span>
                    </div>
                    <div class="mt-2 space-y-2">
                        <p><strong>文件名：</strong><span id="s3Filename"></span></p>
                        <p><strong>文件大小：</strong><span id="s3FileSize"></span></p>
                        <p><strong>文件ID：</strong><span id="s3FileId"></span></p>
                        <button id="s3PreviewBtn" class="btn btn-secondary btn-sm">
                            <i class="fas fa-eye mr-2"></i>
                            预览文件
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 使用说明 -->
    <div class="card bg-base-100 shadow-xl mt-8">
        <div class="card-body">
            <h2 class="card-title">
                <i class="fas fa-info-circle text-info"></i>
                使用说明
            </h2>
            <div class="space-y-2 text-sm text-gray-600">
                <p><strong>1. 环境要求：</strong></p>
                <ul class="list-disc list-inside ml-4">
                    <li>MinIO服务：http://localhost:9000</li>
                    <li>kkFileView服务：http://localhost:8012</li>
                    <li>SpringBoot服务：http://localhost:8080</li>
                </ul>
                <p><strong>2. 支持的文件类型：</strong></p>
                <ul class="list-disc list-inside ml-4">
                    <li>文档：doc, docx, xls, xlsx, ppt, pptx, pdf, txt</li>
                    <li>图片：jpg, jpeg, png, gif, bmp</li>
                    <li>其他：支持kkFileView支持的所有格式</li>
                </ul>
                <p><strong>3. 注意事项：</strong></p>
                <ul class="list-disc list-inside ml-4">
                    <li>确保MinIO和kkFileView服务已启动</li>
                    <li>上传文件大小限制：100MB</li>
                    <li>AmazonS3方式上传的文件URL有过期时间</li>
                </ul>
            </div>
        </div>
    </div>
</div>

<script>
    // 文件预览URL处理
    function previewFile(url, filename) {
        // 处理签名URL过期问题
        const cleanUrl = url.split('?')[0] + '?fullfilename=' + filename;
        const encodedUrl = encodeURIComponent(Base64.encode(cleanUrl));
        window.open('http://localhost:8012/onlinePreview?url=' + encodedUrl);
    }

    // 原生MinioClient上传
    document.getElementById('minioForm').addEventListener('submit', async (e) => {
        e.preventDefault();

        const formData = new FormData();
        const fileInput = e.target.querySelector('input[type="file"]');
        formData.append('file', fileInput.files[0]);

        try {
            const response = await fetch('/api/file/upload/minio', {
                method: 'POST',
                body: formData
            });

            const result = await response.json();

            if (result.success) {
                document.getElementById('minioFilename').textContent = result.filename;
                document.getElementById('minioFileUrl').href = result.fileUrl;
                document.getElementById('minioPreviewBtn').onclick = () => {
                    window.open(result.previewUrl, '_blank');
                };
                document.getElementById('minioResult').classList.remove('hidden');
            }
        } catch (error) {
            alert('上传失败：' + error.message);
        }
    });

    // AmazonS3 SDK上传
    document.getElementById('s3Form').addEventListener('submit', async (e) => {
        e.preventDefault();

        const formData = new FormData();
        const fileInput = e.target.querySelector('input[type="file"]');
        formData.append('file', fileInput.files[0]);

        try {
            const response = await fetch('/api/file/upload/s3', {
                method: 'POST',
                body: formData
            });

            const result = await response.json();

            if (result.success) {
                document.getElementById('s3Filename').textContent = result.filename;
                document.getElementById('s3FileSize').textContent = (result.fileSize / 1024).toFixed(2) + ' KB';
                document.getElementById('s3FileId').textContent = result.fileId;
                document.getElementById('s3PreviewBtn').onclick = () => {
                    window.open(result.previewUrl, '_blank');
                };
                document.getElementById('s3Result').classList.remove('hidden');
            }
        } catch (error) {
            alert('上传失败：' + error.message);
        }
    });
</script>
</body>
</html>